<!-- 使用 type="home" 属性设置首页 -->
<route type="home" lang="json5">
{
  style: { navigationBarTitleText: '%pages.index.index.title%' },
  name: 'home'
}
</route>

<template>
  <view class="page-container" :class="{ 'theme-dark': theme === 'dark', 'theme-light': theme === 'light' }">
    <!-- 头部区域 -->
    <view class="header-section">
      <view class="logo-container">
        <image class="logo-image" src="@/static/images/logo.png" />
      </view>
      <view class="app-info">
        <view class="app-title">bsin-app-uni</view>
        <view class="app-desc">{{ t('about') }}</view>
      </view>
    </view>

    <!-- 主题切换卡片 -->
    <view class="theme-card">
      <wd-button type="primary" @click="changeThemeColor" custom-class="theme-btn">🎨 主题色切换</wd-button>
      <view class="theme-switch">
        <text class="switch-label">🌙 暗色模式</text>
        <wd-switch v-model="theme" active-value="light" inactive-value="dark" size="24px" />
      </view>
    </view>

    <!-- 功能宫格 -->
    <view class="grid-section">
      <view class="grid-container">
        <view v-for="item in gridList" :key="item.id" class="grid-item" @click="handleItemClick(item)">
          <view class="grid-icon" :style="{ background: item.bgColor }">
            <text class="icon-emoji">{{ item.emoji }}</text>
          </view>
          <view class="grid-title">{{ item.title }}</view>
          <view class="grid-desc">{{ item.text }}</view>
        </view>
      </view>
    </view>

    <!-- 设置选项 -->
    <view class="settings-section">
      <!-- 多语言设置 -->
      <view class="setting-item" @click="setLocale">
        <view class="setting-left">
          <text class="setting-icon">🌐</text>
          <text class="setting-text">{{ t('nowLocaleText') }}</text>
        </view>
        <view class="setting-right">
          <text class="setting-value">{{ t('nowLocale') }}</text>
          <wd-icon name="chevron-right" size="18px" color="#9e9e9e"></wd-icon>
        </view>
      </view>

      <!-- 分包页面 -->
      <view class="setting-item" @click="goSubPage">
        <view class="setting-left">
          <text class="setting-icon">📦</text>
          <text class="setting-text">分包页面</text>
        </view>
        <view class="setting-right">
          <wd-icon name="chevron-right" size="18px" color="#9e9e9e"></wd-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
/* ------------------------ 导入 与 引用 ----------------------------------- */
import { useTheme, useI18n } from '@/hooks';
const { theme, setThemeColor } = useTheme();
const { t, setLocale } = useI18n();

// 定义网格项类型
interface GridItem {
  id: number;
  emoji: string;
  title: string;
  text: string;
  bgColor: string;
  name?: string;
  url?: string;
}

/* 宫格列表 - 改为响应式computed，使用CSS变量 */
const gridList = computed<GridItem[]>(() => [
  {
    id: 1,
    emoji: '🏗️',
    title: String(t('layersTitle') || 'Layout布局'),
    text: 'SFC',
    bgColor: 'var(--bsin-gradientPurple)',
    name: 'my'
  },
  {
    id: 2,
    emoji: '📎',
    title: String(t('attachTitle') || 'Pinia使用'),
    text: String(t('attachText') || '状态管理'),
    bgColor: 'var(--bsin-gradientPink)',
    url: '/pages/piniaDemo/index'
  },
  {
    id: 3,
    emoji: '🔗',
    title: String(t('linkUnlinkTitle') || '单一请求'),
    text: String(t('linkUnlinkText') || '请求(与状态分离)'),
    bgColor: 'var(--bsin-gradientBlue)',
    url: '/pages/queryDemo/queryTestDemo'
  },
  {
    id: 4,
    emoji: '🌐',
    title: String(t('linkTitle') || '请求+状态'),
    text: String(t('linkText') || '请求(与状态结合)'),
    bgColor: 'var(--bsin-gradientGreen)',
    url: '/pages/queryDemo/useRequestDemo'
  },
  {
    id: 5,
    emoji: '🔐',
    title: String(t('lockOffTitle') || '权限控制'),
    text: String(t('lockOffText') || '路由与按钮'),
    bgColor: 'var(--bsin-gradientOrange)',
    name: 'authDemo'
  },
  {
    id: 6,
    emoji: '🎨',
    title: String(t('transferTitle') || 'WotUI组件'),
    text: String(t('transferText') || '高频组件'),
    bgColor: 'var(--bsin-gradientCyan)',
    url: '/pages/wotUiDemo/index'
  },
  {
    id: 7,
    emoji: '📄',
    title: String(t('viewModuleTitle') || '分页案例'),
    text: 'z-padding',
    bgColor: 'var(--bsin-gradientPeach)',
    url: '/pages/queryDemo/zPagingDemo'
  },
  {
    id: 8,
    emoji: '🌍',
    title: String(t('viewListTitle') || '国际化'),
    text: 'i18n',
    bgColor: 'var(--bsin-gradientTeal)',
    url: '/pages/i18nDemo/index'
  },
  {
    id: 9,
    emoji: '⚡',
    title: 'Unocss',
    text: String(t('chartBubbleTitle') || '原子CSS'),
    bgColor: 'var(--bsin-gradientIndigo)',
    url: '/pages/unocssDemo/index'
  }
]);

/* ------------------------ 函数 与 方法 ----------------------------------- */

const goSubPage = () => {
  uni.navigateTo({ url: '/pages-main/index/index' });
};

const handleItemClick = (item: GridItem) => {
  if (item.name) {
    if (item.name === 'my') {
      uni.switchTab({ url: '/pages/my/index' });
    } else if (item.name === 'authDemo') {
      uni.navigateTo({ url: '/pages-sub/authDemo/index' });
    }
  } else if (item.url) {
    // 处理URL跳转逻辑
    console.log('跳转到:', item.url);
  }
};

function getRandomColor() {
  // 生成随机的十六进制颜色值
  const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
  return randomColor;
}

const changeThemeColor = () => {
  setThemeColor(getRandomColor());
};

/* ------------------------- 生命周期 -------------------------------------- */

import { fetchLogin } from '@/service';
const userInfo = ref();

onMounted(async () => {
  const { data, error } = await fetchLogin({ username: 'admin', password: '123456' }, { custom: { mock: true } });
  if (!error) {
    userInfo.value = data;
    console.log(userInfo.value);
  }
});
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background: var(--bsin-bgPrimary);
  padding: 40rpx 30rpx calc(60px + 40rpx + env(safe-area-inset-bottom));
  transition: background 0.3s ease;
  box-sizing: border-box;
}

/* 暗色模式背景 */
.page-container.theme-dark {
  background: var(--bsin-bgPrimary);
}

/* 头部区域 */
.header-section {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  background: var(--bsin-bgCard);
  padding: 30rpx;
  border-radius: 25rpx;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease;
}

.theme-dark .header-section {
  background: var(--bsin-bgCard);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.logo-container {
  margin-right: 30rpx;
}

.logo-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 20rpx;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.app-info {
  flex: 1;
}

.app-title {
  font-size: 42rpx;
  font-weight: bold;
  color: #2d3748;
  margin-bottom: 10rpx;
  transition: color 0.3s ease;
}

.theme-dark .app-title {
  color: #e2e8f0;
}

.app-desc {
  font-size: 24rpx;
  color: #718096;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.theme-dark .app-desc {
  color: #a0aec0;
}

/* 主题切换卡片 */
.theme-card {
  background: var(--bsin-bgCard);
  padding: 30rpx;
  border-radius: 25rpx;
  margin-bottom: 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.theme-dark .theme-card {
  background: var(--bsin-bgCard);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

:deep(.theme-btn) {
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  border: none !important;
  border-radius: 20rpx !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
}

.theme-switch {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.switch-label {
  font-size: 28rpx;
  color: #4a5568;
  font-weight: 500;
  transition: color 0.3s ease;
}

.theme-dark .switch-label {
  color: #cbd5e0;
}

/* 功能宫格 */
.grid-section {
  margin-bottom: 40rpx;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  background: var(--bsin-bgCard);
  padding: 30rpx;
  border-radius: 25rpx;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.theme-dark .grid-container {
  background: var(--bsin-bgCard);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(74, 85, 104, 0.3);
}

.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25rpx 15rpx;
  border-radius: 20rpx;
  transition: all 0.3s ease;
  cursor: pointer;
}

.grid-item:active {
  transform: scale(0.95);
  background: rgba(102, 126, 234, 0.05);
}

.theme-dark .grid-item:active {
  background: rgba(102, 126, 234, 0.15);
}

.grid-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15rpx;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.icon-emoji {
  font-size: 28rpx;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.8));
}

.grid-title {
  font-size: 24rpx;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 8rpx;
  text-align: center;
  line-height: 1.2;
  transition: color 0.3s ease;
}

.theme-dark .grid-title {
  color: #e2e8f0;
}

.grid-desc {
  font-size: 18rpx;
  color: #9e9e9e;
  text-align: center;
  transition: color 0.3s ease;
}

.theme-dark .grid-desc {
  color: #a0aec0;
}

/* 设置区域 */
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.setting-item {
  background: var(--bsin-bgCard);
  padding: 30rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.theme-dark .setting-item {
  background: var(--bsin-bgCard);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(74, 85, 104, 0.3);
}

.setting-item:active {
  transform: translateY(2rpx);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.theme-dark .setting-item:active {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.setting-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.setting-icon {
  font-size: 32rpx;
}

.setting-text {
  font-size: 30rpx;
  color: #2d3748;
  font-weight: 500;
  transition: color 0.3s ease;
}

.theme-dark .setting-text {
  color: #e2e8f0;
}

.setting-right {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.setting-value {
  font-size: 26rpx;
  color: #718096;
  transition: color 0.3s ease;
}

.theme-dark .setting-value {
  color: #a0aec0;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .page-container {
    padding: 30rpx 20rpx 30rpx;
  }

  .header-section {
    padding: 25rpx;
  }

  .logo-image {
    width: 100rpx;
    height: 100rpx;
  }

  .app-title {
    font-size: 36rpx;
  }

  .app-desc {
    font-size: 22rpx;
  }

  .theme-card {
    padding: 25rpx;
    flex-direction: column;
    gap: 20rpx;
  }

  .grid-container {
    padding: 20rpx;
    gap: 15rpx;
  }

  .grid-item {
    padding: 20rpx 10rpx;
  }

  .grid-icon {
    width: 50rpx;
    height: 50rpx;
  }

  .icon-emoji {
    font-size: 24rpx;
  }

  .grid-title {
    font-size: 22rpx;
  }

  .grid-desc {
    font-size: 16rpx;
  }

  .setting-item {
    padding: 25rpx;
  }

  .setting-text {
    font-size: 28rpx;
  }
}
</style>
